<template>
    <div>
        <div style="margin-bottom:20px">
            <el-radio-group v-model="collect" size="mini" @change="changeImageList">
                <el-radio-button :label="false">全部</el-radio-button>
                <el-radio-button :label="true">收藏</el-radio-button>
            </el-radio-group>
            <el-button style="float:right" type="success" size="mini" @click="showUpload">上传图片素材</el-button>
        </div>
        <el-row :gutter="10">
            <el-col 
            v-for="item in imageList"
            @mouseenter.native="mouseenter(item)"
            @mouseleave.native="mouseleave(item)"
            :key="item.id"
            class="img-item"
            :xs="12" :sm="6" :md="6" :lg="4">
                <div class="img-box">
                    <img :src="item.url">
                </div>
                <div class="option" v-if="item.isFlag">
                    <span class="el-icon-star-off" :style="{color:item.is_collected?'red':'white'}" @click="handleClickStar(item)"></span>
                    <span class="el-icon-delete" @click="handleClickDelete(item)"></span>
                </div>
            </el-col>
            
        </el-row>

        <div class="page">
            <el-pagination
                background
                @current-change="currentChange"
                layout="prev, pager, next"
                :current-page.sync="pageNum"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog
            :before-close="beforeClose"
            title="上传"
            :visible.sync="dialogVisible"
            width="30%"
            :append-to-body="true"
            >

            <el-upload
                class="avatar-uploader"
                action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
                name="image"
                :headers="headers"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeUpload"
                >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="beforeClose">取 消</el-button>
                <el-button type="primary" @click="beforeClose">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {getUserToken} from '@/store/index.js'
import {api_images} from '@/api/image.js'
export default {
    data(){
        return{
            radio1:'',
            pageNum:1,
            total:20,
            per_page:10,
            imageList:[],
            collect:false,
            dialogVisible:false,
            headers:{
                Authorization: `Bearer ${getUserToken().token}`
            },
            imageUrl:""

        }
    },
    methods:{
        getImages(){
            let params = {
                collect:this.collect,
                page:this.pageNum,
                per_page:this.per_page
            }
            api_images(params).then(res=>{
                console.log(res);
                var data = res.data.data
                let tempList = data.results
                let targetList = tempList.map(item=>{
                    return {
                        ...item,
                        isFlag:false
                    }
                })
                this.imageList = targetList
                this.total = data.total_count
            })
        },
        currentChange(page){
            this.pageNum = page
            this.getImages();
        },
        changeImageList(){
            this.getImages();
        },
        mouseenter(img){
            img.isFlag = true
        },
        mouseleave(img){
            img.isFlag = false
        },
        handleClickStar(img){
            console.log(img)
        },
        handleClickDelete(img){
            console.log(img)
        },
        showUpload(){
            this.dialogVisible = true
        },
        handleAvatarSuccess(response, file){
            console.log(response)
            console.log(file)
            this.imageUrl = response.data.url
        },
        beforeClose(){
            this.imageUrl = "",
            this.getImages();
            this.dialogVisible = false
        },
        beforeUpload(file){
            console.log("@@@@@@@@@@@@",file)
            if(file.type != 'image/jpeg'){
                this.$message.error("您上传的图片格式不对")
                return false
            }
            return true
        }
        
    },
    created(){
        this.getImages()
    }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<style lang="less" scoped>
.img-box img{
    width: 240px;
    height: 180px;
}
.el-icon-star-off{
    margin-right: 20px;
}
.page{
    margin-top: 20px;
}
.img-item{
    position: relative;
    .option{
        position: absolute;
        background: #ccc;
        bottom: 0;
        width: 100%;

    }
}

</style>